<!DOCTYPE html>

<html>
<head>
    <meta charset='utf-8'>
    <meta name = "viewport" content = "width = device-width">
    <link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids-responsive/cssgrids-responsive.css" type="text/css">
    <script src="{{yuiSeedUrl}}"></script>
    <style>

        body {
            font-family: serif;
        }
        .header {
            font-family: sans-serif;
            background: black;
            min-height: 150px;
            margin: 0;
            color:white;
            padding: 30px 20px;
        }
            .header h2 {
                font-weight:300;
                color: #666;
                margin:0;
                font-family: sans-serif;
            }

        .blurb {
            font-family: sans-serif;
            border-bottom:1px solid #ccc;
        }
            .blurb p {
                line-height: 1.6em;
                font-size: 1em;
            }

        p {
            color: #333;
            font-size: 1.1em;
        }

        h3 {
            font-size:1.2em;
            letter-spacing: -0.05em;
            margin-bottom: 10px;
        }

        h4 {
            color: #9B1518;
            font: normal 0.5em/1.3 Helvetica, Arial, sans-serif;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            margin-bottom: .4em;
        }
        .content {
            padding: 15px;
        }

        .article {
            border-bottom: 1px solid #ddd;
            padding: 0 5px 15px 5px;
        }

        .floatLeft {
            float:left;
            margin: 25px 10px 3px 0;
        }

        .right-bar .article {
            text-align: center;
            padding:15px;
        }
        .right-bar h3 {
            color: #333;
            font-family: 1em;
            font-weight: normal;
            margin-top:0.3em;
        }
        .section-header {
            color: #AA0016;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 1.3em;
            margin-bottom:0.2em;
            padding-bottom:0.5em;
            border-bottom:1px solid #ddd;
            margin-top:1em;
            font-style: normal;
            font-variant: normal;
        }

        @media (max-width: 767px) {

            .header {
                text-align: center;
            }

            .headline h3 {
                font-size:180%;
            }

            .right-bar .article {
                display:inline-block;
                width:30%;
                padding:0;
                border:none;
            }
        }
    </style>
</head>
<body>
    <div class="yui3-g-r">
        <div class="yui3-u-1-2 left-bar">
            <div class="yui3-u-1 content">

                <div class='yui3-u-1 headline article'>
                    <img src="http://c.o0bg.com/rf/image_585w/Boston/2011-2020/2012/11/19/BostonGlobe.com/Lifestyle/Images/Credit_Hilda_Grahnat.jpg">
                    <h3 class='yui3-u-1'>The unstyled look of hipster food magazines</h3>
                    <p>The latest trendy food and lifestyle magazines are driven by a desire to exist outside the mainstream food world and all that goes with it.</p>
                </div>

                <div class='yui3-u-1 article'>
                    <div class='yui3-g'>
                        <h3 class='yui3-u'>A free market will help fix health care</h3>
                        <img class='floatLeft' src="http://c.o0bg.com/rf/image_90x90/Boston/2011-2020/2012/11/28/BostonGlobe.com/EditorialOpinion/Images/jacoby-280.jpg">
                        <div class='yui3-u-1'>
                            <p>What Medicare needs is not more top-down control, but the flexibility and competition of a consumer-driven free market.</p>
                        </div>
                    </div>
                </div>


                <div class='yui3-u-1 article'>
                    <div class='yui3-g'>
                        <h3 class='yui3-u'>Boston's last great unsolved mystery</h3>
                        <img class='floatLeft' src="http://c.o0bg.com/rf/image_90x90/Boston/2011-2020/2012/11/16/BostonGlobe.com/Arts/Images/ryan_gardner-museum14_trave-1399.jpg">
                        <div class='yui3-u-1'>
                            <p>In 1990, Boston’s Isabella Stewart Gardner Museum was robbed of 13 works of art. In this special section, delve into the Globe’s re-examination of the case.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="yui3-u-1-5 center-bar">
            <div class='yui3-u-1 content'>
                <h1 class='yui3-u-1 section-header'>Latest News</h1>
                <div class='yui3-u-1 article'>
                    <h2>Health chief cites 'serious lapses' at state drug lab</h2>
                    <p>The health secretary said lab management failed to alert the state after discovering a “serious breach of protocol” by a chemist.</p>
                </div>
                <div class='yui3-u-1 article'>
                    <h2>Patrick addresses controversies on drug lab, hiring</h2>
                    <p>Governor Patrick said a former highway safety chief with a bad driving record made his administration look “ridiculous.”</p>
                </div>
                <div class='yui3-u-1 article'>
                    <h2>Powerball jackpot up to $550m</h2>
                    <p>The fast-growing jackpot had been $450 million as recently as Tuesday morning.</p>
                </div>
            </div>
        </div>
        <div class="yui3-u-1-4 right-bar">
            <div class='yui3-u-1 content'>
                <h1 class='yui3-u-1 section-header'>Globe Exclusives</h1>
                <div class='yui3-u-1 article'>
                    <img src="http://c.o0bg.com/rf/image_150x150/Boston/Library/Staff/Caricatures/lehigh.png">
                    <h4>Scot Lehigh</h4>
                    <h3>End of the Menino era?</h3>
                </div>
                <div class='yui3-u-1 article'>
                    <img src="http://c.o0bg.com/rf/image_150x150/Boston/2011-2020/2012/11/28/BostonGlobe.com/Business/Images/Suffolk%20Classroom%20Building--150x150.jpg">
                    <h3>Suffolk shifts core of campus downtown</h3>
                </div>
                <div class='yui3-u-1 article'>
                    <img src="http://c.o0bg.com/rf/image_150x150/Boston/2011-2020/2011/12/08/BostonGlobe.com/Metro/Images/GlobeSantaLogoNew--150x150.jpg">
                    <h3>How to donate to Globe Santa</h3>
                </div>
            </div>
        </div>
    </div>

</body>
</html>